<template>
  <cs-card>
    <el-table
      v-loading="isLoading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="参数名称"></el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template v-slot="scoped">
          {{ scoped.row.createTime ? scoped.row.createTime : '—' }}
        </template>
      </el-table-column>
    </el-table>
    <div id="pagination_section">
      <span class="currentSelect">{{ `已选${currentSelect}项，共${totalCount}项` }}</span>
      <div class="pagination_right">
        <span>{{ `${pageSize}条/页` }}</span>
        <cs-pagination
          :currentPage="currentPage"
          :totalPage="totalPage"
          @firstPageClick="firstPageClick"
          @previousPageClick="previousPageClick"
          @nextPageClick="nextPageClick"
          @lastPageClick="lastPageClick"
          @junkToOtherPage="junkToOtherPage"
        />
      </div>
    </div>
  </cs-card>
</template>

<script>
import csCard from '@/components/cs-card/cs-card.vue'
import csPagination from '@/components/cs-pagination/cs-pagination.vue'

import { getGoodsTypeTable } from '@/service/operate/goodsType_manage/goodsType_manage'

export default {
  name: 'goodsType_manage_table',
  components: {
    csCard,
    csPagination
  },
  data() {
    return {
      model: {
        offset: 1,
        limit: 10,
        goodsType: '',
        startTime: '',
        endTime: ''
      },
      // 当前页码
      currentPage: 1,
      // 一页的条数
      pageSize: 10,
      // 总共多少条数据
      totalCount: 0,
      // 总共多少页
      totalPage: 0,
      currentSelect: 0,
      selectId: [],
      tableData: [],
      isLoading: false
    }
  },
  created() {
    this.getGoodsTypeTable()
    // 点击搜索按钮后
    this.$bus.$on('searchGoodsTypeBtnClick', (headerOption) => {
      this.model = headerOption
      this.getGoodsTypeTable(headerOption)
    })
    // 添加货物类型成功后
    this.$bus.$on('addGoodsTypeSuccess', () => {
      this.getGoodsTypeTable()
    })
    // 删除货物类型成功后
    this.$bus.$on('deleteGoodsTypeSuccess', () => {
      this.getGoodsTypeTable()
    })
  },
  beforeDestroy() {
    this.$bus.$off('goodsTypeSelectNum')
  },
  methods: {
    async getGoodsTypeTable() {
      this.isLoading = true
      const data = await getGoodsTypeTable(this.model)
      console.warn(data)
      if (data.code === 0) {
        this.tableData = data.data.list
        this.currentPage = data.data.currPage
        this.pageSize = data.data.pageSize
        this.totalCount = data.data.totalCount
        this.totalPage = data.data.totalPage
        this.isLoading = false
      } else {
        this.isLoading = false
      }
    },
    addParameterInfo() {},
    lastPageClick() {
      if (this.isLoading) return
      this.model.offset = this.totalPage
      this.getGoodsTypeTable()
    },
    nextPageClick() {
      if (this.isLoading) return
      this.model.offset = this.currentPage + 1
      this.getGoodsTypeTable()
    },
    previousPageClick() {
      if (this.isLoading) return
      this.model.offset = this.currentPage - 1
      this.getGoodsTypeTable()
    },
    firstPageClick() {
      if (this.isLoading) return
      this.model.offset = 1
      this.getGoodsTypeTable()
    },
    // 跳转页
    junkToOtherPage(page) {
      this.model.offset = page
      this.getGoodsTypeTable()
    },
    // 表格选择项变化时触发事件
    selectionChange(selection) {
      this.selectId = []
      // 获取当前选择多少项
      this.currentSelect = selection.length
      selection.forEach((item) => {
        this.selectId.push(item.id)
      })
      this.$bus.$emit('goodsTypeSelectNum', this.currentSelect, this.selectId)
    }
  }
}
</script>

<style scoped>
/* 表格选择框样式start */
.el-table >>> .el-checkbox__inner {
  width: 20px;
  height: 20px;
}

.el-table >>> .el-checkbox__inner::after {
  top: 3px;
  left: 6px;
}

.el-table >>> .el-checkbox__inner::before {
  top: 8px;
}

/* 表格选择框样式end */
</style>
